<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="600px"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <el-form ref="flowEdit" label-width="120px" :model="flow" :rules="rules">
      <el-form-item label="复制方式" prop="IsCreateNew">
        <el-radio-group v-model="flow.IsCreateNew">
          <el-radio :label="true">复制一份</el-radio>
          <el-radio :label="false">在原版本上修改</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="流程名" prop="FlowName">
        <el-input
          v-model="flow.FlowName"
          maxlength="50"
          placeholder="流程名"
        />
      </el-form-item>
      <el-form-item label="流程分类" prop="FlowType">
        <treeDicItem
          v-model="flow.FlowType"
          :disabled="flow.IsCreate"
          :dic-id="DictItemDic.flowType"
          placeholder="流程分类"
        />
      </el-form-item>
      <el-form-item label="备注" prop="Remark">
        <el-input
          v-model="flow.Remark"
          type="textarea"
          maxlength="100"
          placeholder="备注"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: center">
      <el-button :loading="loading" type="primary" @click="save">确定</el-button>
      <el-button @click="resetForm">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { DictItemDic } from '@/flow/config/flowConfig'
import * as flowApi from '@/flow/api/flow'
export default {
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      title: '复制流程',
      source: {},
      loading: false,
      flow: {
        Id: null,
        FlowName: null,
        FlowType: null,
        Remark: null,
        IsCreateNew: false
      },
      rules: {
        FlowName: [
          {
            required: true,
            message: '流程名不能为空！',
            trigger: 'blur'
          }
        ],
        FlowType: [
          {
            required: true,
            message: '流程分类不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    save() {
      this.loading = true
      const that = this
      this.$refs['flowEdit'].validate((valid) => {
        if (valid) {
          that.copy()
        } else {
          this.loading = false
          return false
        }
      })
    },
    async copy() {
      await flowApi.Copy(this.flow)
      this.$message({
        message: '复制成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    async reset() {
      this.loading = false
      const data = await flowApi.Get(this.id)
      this.source = data
      this.flow = {
        Id: data.Id,
        FlowName: data.FlowName,
        FlowType: data.FlowType,
        Remark: data.Remark,
        IsCreateNew: false
      }
      this.title = '复制流程:' + data.FlowName
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    resetForm() {
      this.flow = {
        Id: this.source.Id,
        FlowName: this.source.FlowName,
        FlowType: this.source.FlowType,
        Remark: this.source.Remark,
        IsCreateNew: false
      }
    }
  }
}
</script>
